import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(42, 42, 42, .8)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  title: {
    color: '#F8F8F8',
    fontSize: phonePx(30),
    fontWeight: 'bold'
  },
  area: {
    width: phonePx(140),
    height: phonePx(140),
    marginTop: phonePx(43)
  },
  content: {
    position: 'absolute',
    width: phonePx(140),
    height: phonePx(140)
  },
  timeContent: {
    flexDirection: 'row',
    marginTop: phonePx(39),
    alignItems: 'center',
    justifyContent: 'center'
  },
  desc: {
    color: '#FFFFFF',
    fontSize: phonePx(14),
    fontWeight: '600'
  },
  time: {
    width: phonePx(37),
    height: phonePx(16),
    backgroundColor: '#ffffff',
    borderRadius: phonePx(8),
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: phonePx(4)
  },
  timeValue: {
    color: '#2A2A2A',
    fontSize: phonePx(14),
    fontWeight: '600'
  },
  processContent: {
    marginTop: phonePx(16),
    width: phonePx(352),
    height: phonePx(14),
    borderRadius: phonePx(7.5),
    overflow: 'hidden',
    backgroundColor: '#F7F7F7'
  },
  process: {
    height: phonePx(14),
    borderRadius: phonePx(7.5),
    backgroundColor: '#FDD753'
  },
  noFace: {
    backgroundColor: '#A2A7AD'
  },
  close: {
    position: 'absolute',
    top: phonePx(30),
    right: phonePx(30),
    width: phonePx(50),
    height: phonePx(30),
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: phonePx(15)
  },
  closeDesc: {
    fontSize: phonePx(14),
    color: '#ffffff'
  }
});
